<template>
<!-- 搜索历史纪录 -->
  <div>
     <van-cell title="搜索历史" >
      <div v-if="isDeleteShow">
         <!-- eslint-disable-next-line vue/no-mutating-props -->
        <span @click="historyList.splice(0)">全部删除</span>
        &nbsp;&nbsp;
        <span @click="isDelteShow = false">完成</span>
      </div>
      <van-icon name="delete-o" v-else @click="isDeleteShow = true" />
    </van-cell>
    <van-cell
      v-for="(item, index) in historyList " :key="index"
      :title='item'
      @click="onSearchItemDelete(item,index)">
      <van-icon name="close" v-show="isDeleteShow" />
    </van-cell>

  </div>
</template>

<script>
import { getItem, setItem } from '@/utils/storage'
export default {
  created () {
    console.log(this.historyList)
  },
  props: {
    // 基本数据类型不可以更改
    // 引用数据类型： 可以修改 ， 不可以赋值
    // historyList: {
    //   type: Array,
    //   requried: true
    // }
  },
  data () {
    return {
      isDeleteShow: false,
      historyList: getItem('history') || []
    }
  },
  methods: {
    // 点击删除或搜索
    onSearchItemDelete (item, index) {
      // 所过在删除状态
      if (this.isDeleteShow) {
        // eslint-disable-next-line vue/no-mutating-props
        this.historyList.splice(index, 1)

        setItem('history', this.historyList)
      // eslint-disable-next-line brace-style
      }
      // 搜索状态
      else {
        this.$emit('search', item)
      }
    }
  }

}
</script>

<style>

</style>
